<template>
  <div class="dispatchPlanOne-wrapper">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待派车" name="first">
        <div class="dispatchPlanOne-search">
          <div class="search-header">
            <el-form class="search-form search-less" v-if="!showMore">
              <el-form-item class="search-keyword search-form-bottom" label="关键字:">
                <el-input placeholder="输入货物/收货人/承运商/业务编号/派车编号等"  v-model="queryForm.keyword"></el-input>
                <el-button class="search-btn" type="primary" @click="onNoPlanSubmit">查询</el-button>
                <el-button @click="reset1">重置</el-button>
                <div class="more" @click="handleShowMore">更多筛选条件<i class="el-icon-arrow-down"></i></div>
              </el-form-item>
            </el-form>
            <el-form class="search-form search-more" v-if="showMore"   label-width="80px">
              <el-form-item label="派车日期:">
                <el-row>
                  <el-button v-for ="(item,index) in dataStatus" :key="index" @click="handleDateStatusList(index)" :class="{statusActive:index===dataCurrentStatus}" type="text" plain>{{item}}</el-button>
<!--                  <div class="block">-->
                    <span class="custom-date">自定义:</span>
                  <el-date-picker
                    v-model="inputDate1"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
<!--                  </div>-->
                </el-row>

              </el-form-item>
              <div class="receiving parallel">
                <el-form-item label="收货单位:">
                  <el-input class="selectInput" placeholder="请选择收货单位" v-model="queryForm.companyName" size="small" @focus="getCompanyClient">
<!--                    <template slot="append"><span @click="getCompanyClient">选择</span></template>-->
                  </el-input>
                </el-form-item>
                <el-form-item label="收货信息:">
                  <el-input placeholder="输入货物人/联系电话/收货地址"  v-model="queryForm.receiveMsg"></el-input>
                </el-form-item>

              </div>
              <div class="parallel">
              <el-form-item label="承运商:">
                <el-input class="selectInput" placeholder="请选择承运商" v-model="queryForm.carrier" size="small" @focus="getCarrierCompanyClient">
<!--                  <template slot="append"><span @click="getCompanyClient">选择</span></template>-->
                </el-input>
              </el-form-item>
              <el-form-item label="货物名称:">
                <el-input class="selectInput" placeholder="请选择货物名称" v-model="queryForm.productName" size="small" @focus="getProductClient">
<!--                  <template slot="append"><span @click="getProductClient">选择</span></template>-->
                </el-input>
              </el-form-item>
              </div>
              <div class="search-form-bottom">
              <el-button class="search-btn" type="primary" @click="onNoPlanSubmit">查询</el-button>
              <el-button @click="reset1">重置</el-button>
              <div class="more" @click="handleShowMore">更多筛选条件<i class="el-icon-arrow-up"></i></div>
              </div>
            </el-form>
          </div>
            <section class="right-but" style="display:flex;margin-bottom: 2px">
                <el-button type="text" style="margin-right:-13px" @click="refreshNoPlanList">
                    <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
                </el-button>
                <PopoverBut class="selectBut" ref="popoverButNoPlan" :checkedProps="checkedPropsNoPlan" :options="optionsNoPlan" @getCheckeds="handlerCloumnNoPlan"></PopoverBut>
            </section>
          <div class="search-content">
            <div class="content-center">
              <el-table
                :data="tableNoData"
                class="list-item"
                style="width: 100%"
                v-loading="loading"
                @selection-change="handleSelectionChange"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  width="55"
                  type="selection">
                </el-table-column>
                <el-table-column  width="240">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p><span style="margin-right: 15px">{{(page.pageNo - 1) * page.pageSize + scope.$index + 1}}</span>{{scope.row.createDate}}</p>
                    </div>
                    <div class="cell-row">
                      <ul>
                        <li><span class="title">货物:</span>{{scope.row.product.name}}</li>
                        <li><span class="title">运量:</span>{{scope.row.transQuantity}}</li>
                        <li><span class="title">车数:</span>{{scope.row.truckNumPlanned}}</li>
                      </ul>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="280">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p @click="showDetail(scope.row)"><span>发运计划编号：</span><a>{{scope.row.planCode}}</a></p>
                    </div>
                    <div class="cell-row">
                      <div class="cell-left">
                        <p>发货:</p>
                      </div>
                      <div class="cell-right">
                        <ul>
                          <li>
                              {{scope.row.sendAddress}}
                          </li>
                          <li>
                              {{scope.row.transContact}}
                          </li>
                          <li>
                              {{scope.row.transPhone}}
                          </li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column  width="460">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p><span>发运期间：</span> {{scope.row.sendStartDate}}-{{scope.row.sendEndDate}}</p>
                    </div>
                    <div class="cell-row">
                      <div class="cell-left">
                        <p>收货:</p>
                      </div>
                      <div class="cell-right">
                        <ul>
                          <li>{{scope.row.receiveAddress}}</li>
                          <li>{{scope.row.receiveContact}}</li>
                          <li>{{scope.row.receivePhone}}</li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="260">
                  <template slot-scope="scope">
                    <div class="cell-title">
                       <p><span>业务编号：</span>{{scope.row.business.codes}}</p>
                    </div>
                    <div class="cell-row">
                      <div class="cell-left">
                        <p>承运:</p>
                      </div>
                      <div class="cell-right">
                        {{scope.row.planCompanys}}
                      </div>
                    </div>
                  </template>
                </el-table-column>
<!--                <el-table-column width="120">-->
<!--                  <template slot-scope="scope">-->
<!--                    <div class="cell-title">-->
<!--&lt;!&ndash;                      <p>状态</p>&ndash;&gt;-->
<!--                    </div>-->
<!--                    <div class="cell-status">-->
<!--                      <el-button @click="detailButton(scope.row)" plain>详情</el-button>-->
<!--                    </div>-->

<!--                  </template>-->
<!--                </el-table-column>-->
                <el-table-column class="operation" width="194">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p>操作</p>
                    </div>
                    <div class="cell-row">
                      <ul>
                        <li><el-link type="primary" :underline="false" @click="transToCompany(scope.row.id)" v-if="hasPermission('transportPlan:plan::planAddCompanys')">派给承运商</el-link></li>
                        <li><el-link type="primary" :underline="false" @click="detailButton(scope.row.id)">派给无车承运人</el-link></li>
                        <li><el-link type="primary" :underline="false" @click="transCar(scope.row.id)" v-if="hasPermission('transportPlan:plan::planAddTrucks')">直接派车</el-link></li>
                      </ul>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="page.pageSize"
                :current-page="page.pageNo"
                layout="total,sizes,prev, pager, next, jumper"
                :total="page.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已派车" name="second">
        <div class="dispatchPlanTwo-search">
          <div class="search-header">
            <el-form class="search-form search-less" v-if="!showMore">
              <el-form-item label="计划状态:">
                <el-row>
                  <el-button :label="this.emptyVal" :key="this.emptyVal" @click="handleStatusListLess()" :class="{statusActive:this.emptyVal===statusCurrentLess}" type="text" plain>全部</el-button>
                  <el-button v-for ="item in  $dictUtils.getDictList('transPlanState')" :label="item.value" :key="item.value" @click="handleStatusListLess(item.value)" :class="{statusActive:item.value===statusCurrentLess}" type="text" plain>{{ item.label }}</el-button>
                </el-row>
              </el-form-item>
              <el-form-item class="search-keyword search-form-bottom" label="关键字:">
                <el-input placeholder="输入货物/收货人/承运商/业务编号/派车编号等"  v-model="queryForm.keyword"></el-input>
                <el-button class="search-btn" type="primary" @click="onPlanSubmit">查询</el-button>
                <el-button @click="reset2">重置</el-button>
                <div class="more" @click="handleShowMore">更多筛选条件<i class="el-icon-arrow-down"></i></div>
              </el-form-item>
            </el-form>
            <el-form class="search-form search-more" v-if="showMore"   label-width="80px">
              <el-form-item label="计划状态:">
                <el-row>
                  <el-button :label="this.emptyVal" :key="this.emptyVal" @click="handleStatusListLess()" :class="{statusActive:this.emptyVal===statusCurrentLess}" type="text" plain>全部</el-button>
                  <el-button v-for ="item in  $dictUtils.getDictList('transPlanState')" :label="item.value" :key="item.value" @click="handleStatusListLess(item.value)" :class="{statusActive:item.value===statusCurrentLess}" type="text" plain>{{ item.label }}</el-button>
                </el-row>
              </el-form-item>
              <el-form-item label="派车日期:">
                <el-row>
                  <el-button v-for ="(item,index) in dataStatus" :key="index" @click="handleDateStatusList(index)" :class="{statusActive:index===dataCurrentStatus}" type="text" plain>{{item}}</el-button>
                  <!--                  <div class="block">-->
                  <span class="custom-date">自定义:</span>
                  <el-date-picker
                    v-model="inputDate2"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                  <!--                  </div>-->
                </el-row>

              </el-form-item>
              <div class="receiving parallel">
                <el-form-item label="收货单位:">
                  <el-input class="selectInput" placeholder="请选择收货单位" v-model="queryForm.companyName" size="small" @focus="getCompanyClient">
<!--                    <template slot="append"><span @click="getCompanyClient">选择</span></template>-->
                  </el-input>
                </el-form-item>
                <el-form-item label="收货信息:">
                  <el-input placeholder="输入货物人/联系电话/收货地址"  v-model="queryForm.receiveMsg"></el-input>
                </el-form-item>

              </div>
              <div class="parallel">
                <el-form-item label="承运商:">
                  <el-input class="selectInput"  placeholder="请选择承运商" v-model="queryForm.carrier" size="small" @focus="getCarrierCompanyClient">
<!--                    <template slot="append"><span @click="getCompanyClient">选择</span></template>-->
                  </el-input>
                </el-form-item>
                <el-form-item label="货物名称:">
                  <el-input class="selectInput" placeholder="请选择货物名称" v-model="queryForm.productName" size="small" @focus="getProductClient">
<!--                    <template slot="append"><span @click="getProductClient">选择</span></template>-->
                  </el-input>
                </el-form-item>
              </div>
              <div class="search-form-bottom">
                <el-button class="search-btn" type="primary" @click="onPlanSubmit">查询</el-button>
                <el-button @click="reset2">重置</el-button>
                <div class="more" @click="handleShowMore">更多筛选条件<i class="el-icon-arrow-up"></i></div>
              </div>
            </el-form>
          </div>
            <section class="right-but" style="display:flex;margin-bottom: 2px">
                <el-button type="text" style="margin-right:-13px" @click="refreshPlanList">
                    <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
                </el-button>
                <PopoverBut class="selectBut" ref="popoverButPlan" :checkedProps="checkedPropsPlan" :options="optionsPlan" @getCheckeds="handlerCloumnPlan"></PopoverBut>
            </section>
          <div class="search-content">
            <div class="content-center">
              <el-table
                :data="tableData"
                class="list-item"
                style="width: 100%"
                v-loading="loading"
                @selection-change="handleSelectionChange"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  width="60"
                  type="selection">
                </el-table-column>
                <el-table-column  width="240">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p><span style="margin-right: 15px">{{(page.pageNo - 1) * page.pageSize + scope.$index + 1}}</span>{{scope.row.createDate}}</p>
                    </div>
                    <div class="cell-row">
                      <ul>
                        <li><span class="title">货物:</span>{{scope.row.product.name}}</li>
                        <li><span class="title">运量:</span>{{scope.row.transQuantity}}</li>
                        <li><span class="title">车数:</span>{{scope.row.truckNumPlanned}}</li>
                      </ul>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="280">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p @click="showDetail(scope.row)"><span>发运计划编号：</span><a>{{scope.row.planCode}}</a></p>
                    </div>
                    <div class="cell-row">
                      <div class="cell-left">
                        <p>发货:</p>
                      </div>
                      <div class="cell-right">
                        <ul>
                          <li>
                            {{scope.row.sendAddress}}
                          </li>
                          <li>
                            {{scope.row.transContact}}
                          </li>
                          <li>
                            {{scope.row.transPhone}}
                          </li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column  width="460">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p><span>发运期间：</span> {{scope.row.sendStartDate}}-{{scope.row.sendEndDate}}</p>
                    </div>
                    <div class="cell-row">
                      <div class="cell-left">
                        <p>收货:</p>
                      </div>
                      <div class="cell-right">
                        <ul>
                          <li>{{scope.row.receiveAddress}}</li>
                          <li>{{scope.row.receiveContact}}</li>
                          <li>{{scope.row.receivePhone}}</li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="260">
                  <template slot-scope="scope">
                    <div class="cell-title">
                       <p><span>业务编号：</span>{{scope.row.business.codes}}</p>
                    </div>
                    <div class="cell-row">
                      <div class="cell-left">
                        <p>承运:</p>
                      </div>
                      <div class="cell-right">
                        <ul>
                          <li  v-for="(item, index) in scope.row.planDetailList" :key="index" :label="item" >
                            <span v-for="(item1, index1) in item.company" :key="index1" :label="item1">
                              {{item1}}
                            </span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="120">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p>状态</p>
                    </div>
                    <div class="cell-status">
                      <p class="state empty" v-if="scope.row.state === 1"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>
                      <!--                      <p class="dispatch-status examine"><span class="dispatch-status-note"></span>审批中</p>-->
                      <p class="state process" v-if="scope.row.state === 99"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>
                      <p class="state normal" v-if="scope.row.state === 100"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>
                      <p class="state invalid" v-if="scope.row.state === 101"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>
                      <p class="state success" v-if="scope.row.state === 102"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>
                      <p class="state invalid" v-if="scope.row.state === 103"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>

                    </div>

                  </template>
                </el-table-column>
                <el-table-column width="197">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p>执行情况</p>
                    </div>
                    <div class="cell-row">
                      <ul>
                        <li>已派车数：{{scope.row.truckNumExecuted}}车</li>
                        <li>实际过磅：<el-link type="primary" :underline="false" @click="handleImplementForm(scope.row)">{{scope.row.netWeightCount}}车</el-link></li>
                        <li>实际发运：{{scope.row.netWeightNum}}吨</li>
                      </ul>
                    </div>
                  </template>
                </el-table-column>
<!--                <el-table-column>-->
<!--                  <template slot-scope="scope">-->
<!--                    <div class="cell-title">-->
<!--                      <p></p>-->
<!--                    </div>-->
<!--                    <div class="cell-row">-->
<!--                      <el-button @click="detailButton(scope.row)" plain>详情</el-button>-->
<!--                    </div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
              </el-table>
              <el-pagination
                background
                @size-change="handleSizeNewChange"
                @current-change="handleCurrentNewChange"
                :page-size="page2.pageSize"
                :current-page="page2.pageNo"
                layout="total,sizes,prev, pager, next, jumper"
                :total="page2.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <implementForm ref="implementForm"></implementForm>
    <!--客户选择弹窗-->
    <CompanyDialog ref="CompanyDialog" @getCompanyData="getCompanyData">

    </CompanyDialog>
    <!--产品选择弹窗-->
    <ProductDialog ref="ProductDialog" @getProductData="getProductData">

    </ProductDialog>
    <!--客户选择弹窗-->
    <ReceiveCompanyDialog ref="receiveCompanyDialog" @getCompanyData="getCompanyData">

    </ReceiveCompanyDialog>

    <!--承运商选择弹窗-->
    <CarrierCompanyDialog ref="carrierCompanyDialog" @getCarrierData="getCarrierData">

    </CarrierCompanyDialog>

    <DispatchDetail ref="dispatchDetail">

    </DispatchDetail>

    <DirectlyAssignationForm ref="directlyForm">

  </DirectlyAssignationForm>

    <PlanToCompany ref="planToCompany">

    </PlanToCompany>
  </div>
</template>

<script>
  import implementForm from '@/views/modules/transport/dispatchPlanOne/implementForm'
  import DispatchDetail from './dispatchDetail'
  import PlanToCompany from './planToCompany'
  import DirectlyAssignationForm from './directlyAssignationForm'
  import CompanyDialog from '@/components/dialog/companyDialog.vue'
  import CarrierCompanyDialog from '@/components/dialog/carrierCompanyDialog.vue'
  import ReceiveCompanyDialog from '@/components/dialog/receiveCompanyDialog.vue'
  import ProductDialog from '@/components/dialog/productDialog.vue'
  import { getPlanList } from '@/api/transplan/transplan.js'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  const options2 = []
    export default {
      name: 'dispatchPlanOneForm',
      components: {
        implementForm,
        CompanyDialog,
        ProductDialog,
        DirectlyAssignationForm,
        CarrierCompanyDialog,
        ReceiveCompanyDialog,
        DispatchDetail,
        PlanToCompany,
        PopoverBut
      },
      data () {
        return {
          checkedPropsNoPlan: options1,
          optionsNoPlan: [],
          checkedPropsPlan: options2,
          optionsPlan: [],
          showMore: false,
          activeName: 'first',
          statusCurrentLess: '',
          statusCurrentMore: 0,
          carCurrentStatus: 0,
          dataCurrentStatus: 0,
          statusListLess: ['全部', '草稿', '审批中', '待派车', '执行中', '暂停执行', '执行完', '中止', '退回'],
          statusListMore: ['全部', '未生效', '未执行', '执行中', '执行完', '执行中止'],
          carStatus: ['全部', '已派车', '未派车'],
          dataStatus: ['今日', '本周', '本月', '上月', '本年', '近7日', '近15日', '近30日'],
          // activeNames: ['0'],
          inputDate1:'',
          inputDate2:'',
          value1: '',
          emptyVal: '',
          receivingCompany: [{
            value: '选项1',
            label: '衡水市春风华禹散热器出口有限责任公司'
          }, {
            value: '选项2',
            label: '选项2'
          }],
          receivingCompanyValue: '',
          carriers: [{
            value: '选项1',
            label: '衡水市春风华禹散热器出口有限责任公司'
          }],
          carriersValue: '',
          cargos: [{
            value: '选项1',
            label: '生铁-国际A'
          }],
          cargosValue: '',
          tableData: [
          ],
          tableNoData: [
          ],
          stateVal: 101,
          companyTable: [],
          dispatchTableData: [],
          input: '',
          currentPage1: 5,
          page: {
            pageSize: 10,
            pageNo: 1,
            total: 0
          },
          page2: {
            pageSize: 10,
            pageNo: 1,
            total: 0
          },
          ids: '',
          selectDatas: [],
          queryForm: {
            pageSize: 10,
            pageNo: 1,
            props: 1,
            orderBy: '',
            orderByAORC: '',
            keyword: '',
            processType: '',
            state: '',
            dispatchingStatus: '',
            selectDateType: '',
            receiveAddress: '',
            createDate: '',
            receiveMsg: '',
            productId: '',
            productName: '',
            companyName: '',
            companyId: '',
            carrier: '',
            carrierId: ''
          },
          loading: false,
          viewForm: {}
        }
      },
      methods: {
        handleClick (tab, event) {
          if (tab.index === '1') {
            this.getPlanList()
          }
          if (tab.index === '0') {
            this.getNoPlanList()
          }
        },
        reset1 () {
          this.inputDate1 = ''
          this.queryForm.state = ''
          this.statusCurrentLess = ''
          this.queryForm.keyword = ''
          this.queryForm.dispatchingStatus = ''
          this.carCurrentStatus = ''
          this.queryForm.selectDateType = ''
          this.dataCurrentStatus = ''
          this.queryForm.startDate = ''
          this.queryForm.endDate = ''
          this.queryForm.companyName = ''
          this.queryForm.companyId = ''
          this.queryForm.receiveMsg = ''
          this.queryForm.carrier = ''
          this.queryForm.carrierId = ''
          this.queryForm.productName = ''
          this.queryForm.productId = ''
        },
        reset2 () {
          this.inputDate2 = ''
          this.queryForm.state = ''
          this.statusCurrentLess = ''
          this.queryForm.keyword = ''
          this.queryForm.dispatchingStatus = ''
          this.carCurrentStatus = ''
          this.queryForm.selectDateType = ''
          this.dataCurrentStatus = ''
          this.queryForm.startDate = ''
          this.queryForm.endDate = ''
          this.queryForm.companyName = ''
          this.queryForm.companyId = ''
          this.queryForm.receiveMsg = ''
          this.queryForm.carrier = ''
          this.queryForm.carrierId = ''
          this.queryForm.productName = ''
          this.queryForm.productId = ''
        },
        // 已派车
        getPlanList () {
          this.loading = true
          if(this.inputDate2 == null){
            this.queryForm.startDate = null
            this.queryForm.endDate = null
          }else{
            this.queryForm.startDate = this.inputDate2[0]
            this.queryForm.endDate = this.inputDate2[1]
          }
          this.queryForm.pageSize = this.page.pageSize
          this.queryForm.pageNo = this.page.pageNo
          this.queryForm.orderBy = 'create_date'
          this.queryForm.orderByAORC = 'desc'
          this.queryForm.dispatchingStatus = 1
          getPlanList(this.queryForm).then(({data}) => {
            if (data.code === '200') {
              this.tableData = data.result.list
              this.page2.total = data.result.count
              this.loading = false
            }
          })
        },
        // 未派车
        getNoPlanList () {
          this.loading = true
          if(this.inputDate1 == null){
            this.queryForm.startDate = null
            this.queryForm.endDate = null
          }else{
            this.queryForm.startDate = this.inputDate1[0]
            this.queryForm.endDate = this.inputDate1[1]
          }
          this.queryForm.pageSize = this.page.pageSize
          this.queryForm.pageNo = this.page.pageNo
          this.queryForm.orderBy = 'create_date'
          this.queryForm.orderByAORC = 'desc'
          this.queryForm.dispatchingStatus = 2
          getPlanList(this.queryForm).then(({data}) => {
            if (data.code === '200') {
              this.tableNoData = data.result.list
              this.page.total = data.result.count
              this.loading = false
            }
          })
        },
          // 是否显示待派车某列数据
          handlerCloumnNoPlan(e) {
              this.checkedPropsNoPlan = e
          },
          // 是否显示已派车某列数据
          handlerCloumnPlan(e) {
              this.checkedPropsPlan = e
          },
          refreshNoPlanList () {
              this.getNoPlanList()
          },
          refreshPlanList () {
              this.getPlanList()
          },
        detailButton (row) {
          this.$refs.planToCompany.init('noCarCompany', row)
        },
        transCar (row) {
          this.$refs.directlyForm.init('execPlanCar', row)
        },

        transToCompany (row) {
          this.$refs.planToCompany.init('execPlanCompany', row)
        },
        handleSelectionChange (val) {
          this.selectDatas = val
        },
        // 收货地址选择弹窗
        getCompanyClient () {
          this.$refs['receiveCompanyDialog'].init('receiveCompany', 1)
        },
        // 收货地址选择数据回显
        getCompanyData (row) {
          this.queryForm.companyName = row.names
          this.queryForm.companyId = row.id
          this.dialogVisible = false
        },
        // 承运商选择弹窗
        getCarrierCompanyClient () {
          this.$refs['carrierCompanyDialog'].init('carrier', 3)
        },
        // 承运商选择数据回显
        getCarrierData (row) {
          this.queryForm.carrier = row.names
          this.queryForm.carrierId = row.id
          this.dialogVisible = false
        },
        // 货物选择弹窗
        getProductClient () {
          this.$refs['ProductDialog'].dialogVisible = true
        },
        getProductData (row) {
          this.queryForm.productName = row.name
          this.queryForm.productId = row.id
          this.dialogVisible = false
        },
        onPlanSubmit () {
          this.getPlanList()
        },
        onNoPlanSubmit () {
            this.getNoPlanList()
        },
        handleStatusListLess (index) {
          this.queryForm.state = index
          this.statusCurrentLess = index
        },
        handleStatusMoreList (index) {
          this.statusCurrentMore = index
        },
        handleCarStatusList (index) {
          this.queryForm.dispatchingStatus = index
          this.carCurrentStatus = index
        },
        handleDateStatusList (index) {
          this.queryForm.selectDateType = index
          this.dataCurrentStatus = index
        },
        handleChange (val) {
        },
        handleShowMore () {
          this.showMore = !this.showMore
        },
        handleSizeChange (e) {
          this.page.pageSize = e
          this.getPlanList()
        },
        handleCurrentChange (e) {
          this.page.pageNo = e
          this.getPlanList()
        },
        handleSizeNewChange (e) {
          this.page2.pageSize=e
          this.getNotFinishedList()
        },
        handleCurrentNewChange (e) {
          this.page2.pageNo = e
          this.getNotFinishedList()
        },
        tableRowClassName ({ row, rowIndex }) {
          if (rowIndex % 2 === 1) {
            return 'warning-row'
          } else {
            return 'success-row'
          }
        },
        tableRowClassName2 ({ row, rowIndex }) {
          if (rowIndex % 2 === 1) {
            return 'warning-row'
          } else {
            return 'success-row'
          }
        },
        add (row) {
          this.$refs.addDispatchPlanForm.init('add', row)
        },
        handleImplementForm (row) {
          this.$refs.implementForm.init('implement', row)
        },
        showDetail (row) {
          this.$refs.dispatchDetail.init('detail', row)
        }
      },
      mounted () {
        this.getNoPlanList()
          this.$refs.popoverButNoPlan.disable = true
          this.$refs.popoverButPlan.disable = true
      }
    }
</script>

<style lang="scss" scoped>
    @import '@/assets/scss/config.scss';
  .dispatchPlanOne-wrapper{
    margin:-20px;

    ::v-deep>.el-tabs{
      .el-tabs__header{
        margin-bottom: 0;
        .el-tabs__item{
          width: 120px;
          height: 50px;
          line-height: 48px;
          border: 1px solid transparent;
          /*border-radius: 6px 0px 0px 0px;*/
          font-size: 17px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          text-align: center;
          padding: 0;
        }
        .el-tabs__item.is-active{
          background: $--color-primary-liyu;
          border-color: #EEEEEE;
          color: #FFFFFF;
        }
        .el-tabs__active-bar{
          display: none;
        }
        .el-tabs__nav-wrap::after{
          height: 1px;
          background: #EEEEEE;
        }
      }
      .el-tabs__content{
        .el-tab-pane{
          padding: 15px 20px;
        }
        .dispatchPlanOne-search,.dispatchPlanTwo-search{
          .search-header{
            .search-less>.el-form-item:first-child{
              margin-bottom: 13px;
            }
            .search-less{
              .search-form-bottom{
                margin-bottom: 10px;
                .el-button--primary{
                  margin-left: 50px;
                }
              }
            }
            .search-more>.el-form-item{
              margin-bottom: 20px;
            }
            .search-more{
              .search-form-bottom{
                text-align: center;
                margin-bottom: 10px;
                .el-button--primary{
                  margin-left: 0;
                }
              }
            }
            .el-form-item__content{
              line-height: inherit;
            }
            .el-button--text.is-plain{
              padding: 5px 9px;
              border-radius: 4px;
              font-size: 16px !important;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              margin-top: 3px;
              line-height: inherit;
              min-width: fit-content;
              height: fit-content;
            }
            .el-button--text.statusActive,.el-button--text.is-plain:hover{
              color: $--color-primary-liyu;
              border: 1px solid $--color-primary-liyu;
            }
            .inputAppend-wrapper.el-input{
              input{
                width: 312px;
              }
            }
            .el-input {
              width: inherit;
              input {
                width: 350px;
              }
              .el-input__inner::-webkit-input-placeholder {
                color: #999999;
              }
            }
            .search-more{
              .custom-date{
                margin-left: 31px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
              }
              .search-form-bottom{
                .el-button--primary{
                  margin-left: 0;
                }
              }

              .el-form-item .el-date-editor{
                width: 280px;
                border: 1px solid #AAAAAA;
                margin-left: 12px;

                .el-range-separator{
                  width: 10%;
                  line-height: 28px;
                }
                .el-range__icon{
                  line-height: 28px;
                }

              }
              .more-item-label{
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                width: 90px;
              }
              .el-select{
                .el-input__inner{
                  width: 460px;
                  height: 36px;
                  border: 1px solid #AAAAAA;
                  border-radius: 4px;
                }
              }
              .parallel{
                display: flex;
                .el-form-item{
                  display: flex;
                  margin-bottom: 20px;
                  .el-form-item__content{
                    margin-left: 0 !important;
                  }
                }
                .el-form-item:first-child{
                  margin-right: 30px;
                }
              }
            }
            .search-keyword{
              display: flex;
            }
            .more{
              display: inline-block;
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #666666;
              margin-left: 47px;
              cursor: pointer;
            }
          }
          .search-content{
            .content-header{
              .el-button--default.is-plain{
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                padding: 0;
                width: 60px;
                height: 36px;
                border: 1px solid #AAAAAA;
                border-radius: 4px;
              }
              .el-button--default.is-plain:nth-child(4){
                width: 99px;
              }
            }

          }

        }
      }

    }
    .search-content .content-center{
      p{
        margin: 0;
      }
      ::v-deep.el-table{
        .el-table__body{
          width: 100% !important;
        }
        .el-table-column--selection{
          .cell{
            text-align: center;
            border-left: 1px solid #dddddd;
            padding-bottom: 0;
            min-height: 150px;
            border-left: 1px solid #dddddd;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            position: absolute;
            top: 9.6px;
            bottom: 0;
            width: 100%;
            label{
              display: inline-block;
              width: 100%;
              background: #EEEEEE;
              height: 40px;
              line-height: 40px;

            }
          }
        }
        .el-table__header-wrapper{
          display: none;
        }
        .el-table__row{
          border-bottom: 1px solid #DDDDDD;
          box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.1);
          border-radius: 6px;

        }
        .el-table__row.warning-row{
          background: #FFFFFF;
        }
        td{
          vertical-align: top;
          border-bottom: 1px solid #DDDDDD;
          padding-bottom: 0;
          padding-top: 10px;
          .cell{
            .cell-title{
              color: #333333;
              span{
                color: #999999;
              }
                a{
                    color: $--color-primary-liyu;
                    cursor: pointer;
                }
            }
            .cell-left{
              color: #999999;
              width: 43px;
            }
            .cell-right{
              flex: 1;
            }
          }
        }
        td:last-child .cell{
          border-right: 1px solid #DDDDDD;
          position: absolute;
          top: 9.5px;
          bottom: 0;
          width: 100%;
          .el-link{
            .el-link--inner{
              text-decoration: none;
            }
          }
        }
        .cell{
          padding: 0;
          border-top: 1px solid #DDDDDD;
          min-height: 150px;


          .cell-title{
            background: #EEEEEE;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            padding: 0 20px;
          }
          ul{
            list-style: none;
            padding-left: 0;
            margin: 0;
          }
          .cell-row{
            display: flex;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            padding: 14px 20px;

            li{
              margin-top: 5px;
              span.title{
                display: inline-block;
                color: #999999;
                width: 43px;
              }
            }
            li:first-child{
              margin-top: 0;

            }
          }
          .cell-status{
            padding-top: 14px;
          }

        }
        .el-table__body tr:hover>td{
          background-color: #ffffff !important;
        }
        .el-link.is-underline:hover:after{
          border-bottom: none;
        }
        .el-link--inner{
          text-decoration: underline;
        }
      }
    }
  }

</style>
